function Count(obj){
    var self = this;

    this.handle = {
        msg:obj.count?document.querySelectorAll(obj.count):document.querySelectorAll('.product_list .var'),
        check:obj.check?document.querySelectorAll(obj.check):document.querySelectorAll('.product_list .check'),
        allcheck:obj.allcheck?document.querySelector(obj.allcheck):document.querySelector('.finish .check'),
        price:obj.price?document.querySelectorAll(obj.price):document.querySelectorAll('.price'),
        totleprice:obj.totleprice?document.querySelector(obj.totleprice):document.querySelector('.totleprice')
        
    }

    this.checked()
    this.tocheck()
    this.add()
    this.all()
}
Count.prototype = {
    constructor:Count,
    checked:function(){
        for (let i = 0; i < this.handle.check.length; i++) {
            const ele = this.handle.check[i];
            let flag;
            ele.addEventListener('click',()=>{
                flag = ele.querySelector('img').getAttribute('data-check')
                if (flag) {
                    ele.querySelector('img').setAttribute('data-check','')
                    ele.querySelector('img').src = './images/shopcart_checked.png'
                }else{
                    ele.querySelector('img').setAttribute('data-check','true')
                    ele.querySelector('img').src = './images/shopcart_check.png'
                }
                this.all()
            })
        }
        
    },
    monitor:function(f){
        for (let i = 0; i < this.handle.check.length; i++) {
            const ele = this.handle.check[i];
            if (f) {
                ele.querySelector('img').setAttribute('data-check','')
                ele.querySelector('img').src = './images/shopcart_checked.png'
            }else{
                ele.querySelector('img').setAttribute('data-check','true')
                ele.querySelector('img').src = './images/shopcart_check.png'
            }
        }
        this.all()
    },
    tocheck:function(){
        this.handle.allcheck.querySelector('img').addEventListener('click',()=>{
            flag = this.handle.allcheck.querySelector('img').getAttribute('data-check')
            if (flag) {
                this.handle.allcheck.querySelector('img').setAttribute('data-check','')
                this.handle.allcheck.querySelector('img').src = './images/shopcart_checked.png'
                this.monitor(flag)
            }else{
                this.handle.allcheck.querySelector('img').setAttribute('data-check','true')
                this.handle.allcheck.querySelector('img').src = './images/shopcart_check.png'
                this.monitor(flag)
            }
            this.all()
        })
    },
    add:function(){
        for (let i = 0; i < this.handle.msg.length; i++) {
            const ele = this.handle.msg[i];
            const minus = ele.querySelector('.min');
            const add = ele.querySelector('.add');
            const shu = ele.querySelector('.shu')
            
            add.addEventListener('click',()=>{
                let num = parseInt(shu.innerHTML)
                num++
                shu.innerHTML = num
                this.all()
            })
            minus.addEventListener('click',()=>{
                let num = parseInt(shu.innerHTML)
                num--
                if (num <= 1) {
                    num = 1
                }
                shu.innerHTML = num
                this.all()
            })
        }
    },
    all:function(){
        let sum = 0
        for (let i = 0; i < this.handle.price.length; i++) {
            const ele = this.handle.price[i]
            let f = this.handle.check[i].querySelector('img').getAttribute('data-check')
            let num = this.handle.msg[i].querySelector('.shu').innerHTML
            if (f) {
                sum = sum+num*ele.innerHTML
            }
        }
        this.handle.totleprice.innerHTML = sum.toFixed(1)
    }
}




function Tabs(obj){
    var self = this;

    this.handle = {
        choice:obj.choice ? document.querySelector(obj.choice) : null,
        change:obj.change ? document.querySelector(obj.change) : null,
        mode:obj.mode ? obj.mode : fast,
        showView:1
    }
    this.reset()

    for (let i = 0; i < this.handle.choice.children.length; i++) {
        const ele = this.handle.choice.children[i];
        ele.addEventListener('click',function(){
            self.exchange(i)
        })
    }
    
}

Tabs.prototype = {
    constructor:Tabs,
    exchange:function(num){
        if (this.handle.mode === 'move') {
            this.handle.change.style.transition = 'all 1s'
            this.handle.change.style.marginLeft = '-'+num*100+'%'
        }else if (this.handle.mode === 'fast'){
            for (let i = 0; i < this.handle.change.children.length; i++) {
                const ele = this.handle.change.children[i];
                ele.style.display = 'none'
            }
            this.handle.change.children[num].style.display = 'flex';
            console.log(this.handle.change.children[num]);
        }else if(this.handle.mode === 'opacity'){
            for (let i = 0; i < this.handle.change.children.length; i++) {
                const ele = this.handle.change.children[i];
                ele.style.transition = 'all 1s'
                ele.style.opacity = '0'
            }
            this.handle.change.children[num].style.zIndex = this.handle.showView++
            this.handle.change.children[num].style.opacity = '1'
        }
        autoClass(this.handle.choice.children,'active',num)
    },
    reset:function(){
        if (this.handle.mode === 'move') {
            this.handle.change.style.width = this.size()*100+'%'
        }else if (this.handle.mode === 'fast'){
            for (let i = 0; i < this.handle.change.children.length; i++) {
                const ele = this.handle.change.children[i];
                i===0?ele.style.display = 'flex':ele.style.display = 'none'
            }
        }else if(this.handle.mode === 'opacity'){
            let height = (this.handle.change.children[0].children[0].offsetHeight+10)*this.handle.change.children[0].children.length/16
            console.log(this.handle.change.children[0].children.length);
            this.handle.change.style.position = 'relative'
            this.handle.change.style.height = height+'rem'
            for (let i = 0; i < this.handle.change.children.length; i++) {
                const ele = this.handle.change.children[i];
                ele.style.position = 'absolute';
                i===0?ele.style.zIndex = '1':ele.style.zIndex = '0'
                i===0?ele.style.opacity = '1':ele.style.opacity = '0'
            }
        }
    },
    size:function(){
        return this.handle.choice.children.length
    }
}